<template>
	<view class="setBox">
		
		<u-overlay :show="show1" @click="show1 = false">
		<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
		<button type="primary" @click="takePhoto">拍照</button>
		</u-overlay>
		<ul class="geren_list">
			<li>
				<image mode="widthFix" :src="src"></image>
	<text @click="show = true">修改头像</text>
			</li>
			<li>
				<text class="leftName">姓名</text>
				<text>赵小刚</text>
			</li>
			<li>
				<text class="leftName">账号</text>
				<text>Windir</text>
			</li>
			<li>
				<text class="leftName">部门</text>
				<text>销售部</text>
			</li>
			<li>
				<text class="leftName">职务</text>
				<text>销售经理</text>
			</li>
		</ul>
		<ul class="geren_list">
			<li>
				<text class="leftName">性别</text>
				<text @click="sex=!sex">{{sex==false?"女":"男"}}</text>
			</li>
			<li>
				<text class="leftName">生日</text>
				<text>1984-06-22</text>
			</li>
			<li>
				<text class="leftName">邮箱</text>
				<text>windir@AxureUx.com</text>
			</li>
			<li>
				<text class="leftName">手机</text>
				<text>1979175968</text>
			</li>
			<li>
				<text class="leftName">微信</text>
				<text>1979175968</text>
			</li>
		</ul>
		
		
			<u-action-sheet :actions="list" @select="selectClick" :title="title" :show="show"></u-action-sheet><u-action-sheet :actions="list" :title="title" :show="show" @select="selectClick"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src:"",
				title:'标题',
							list: [
								{
									name:'拍照',
									color:'#3478f7',
									fontSize:'20'
								},
								{
									name:'从相册中选择',
									color:'#3478f7',
									fontSize:'20'
								},
							],
							show: false,
							show1:false,
							sex:false
			}
		},
		methods: {
			// Tabsex(){
			// this.sex=!this.sex
			// },
			selectClick(index){
						if(index.name=="拍照"){
						this.show1=true
						this.show=false
						}else if(index.name=="从相册中选择"){
							// console.log("2")
							uni.chooseImage({
							  	count: 1,
							    sizeType: ['original', 'compressed'],
							    sourceType: ['camera','album'], //这要注意，camera掉拍照，album是打开手机相册
							    success: (res)=> {
									console.log(res);
									const tempFilePaths = res.tempFilePaths;
							    }
							});
							this.show= false
						}
			},
			  takePhoto() {
			            const ctx = uni.createCameraContext();
			            ctx.takePhoto({
			                quality: 'high',
			                success: (res) => {
			                    this.src = res.tempImagePath
			                }
			            });
						this.show=false
			        },
			        error(e) {
			            console.log(e.detail);
			        }
		}
	}
</script>

<style>
	.leftName{
		margin-left: 12px;
	}
	.geren_list{
		margin-top: 10px;
	}
	.geren_list>li>text{
		color: #666666;
		font-size: 14px;
		margin-right: 12px;
	}
	.geren_list>li>image{
		width: 45px;
		height: 45px;
		margin-left: 10px;
	}
	.geren_list>li{
		width: 100vw;
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
		margin-top: 3px;
		
	}
*{
	padding: 0;
	margin: 0;
	list-style-type: none;
}
.setBox{
	background-color:rgba(242, 242, 242, 0.5);
}
</style>
